<template>
	<DropDownPopup :isShow_H5_Mask.sync="isShow_H5_Mask_S" position="bottom" :isMask="true">
		<view slot="content" class="bottom-list flex flex-col ali-cen">
			<view class="bg-White flex wid1p padd30" style="overflow: scroll;">
				<view class="bottom-list-item" @click="onDownload">
					<text class="cuIcon-message bg-DarkTurquoise"></text>
					<text class="mt20">微信</text>
				</view>
				<view class="bottom-list-item">
					<text class="cuIcon-friendadd bg-Orange"></text>
					<text class="mt20">朋友圈</text>
				</view>
				<view class="bottom-list-item" @click="onDelte">
					<text class="cuIcon-warn bg-OrangeRed"></text>
					<text class="mt20">好友</text>
				</view>
				<view class="bottom-list-item" @click="isShow_H5_Mask = false">
					<text class="cuIcon-close bg-Snow"></text>
					<text class="mt20">QQ</text>
				</view>
				<view class="bottom-list-item" @click="isShow_H5_Mask = false">
					<text class="cuIcon-close bg-Snow"></text>
					<text class="mt20">QQ空间</text>
				</view>
				<view class="bottom-list-item" @click="isShow_H5_Mask = false">
					<text class="cuIcon-close bg-Snow"></text>
					<text class="mt20">微博</text>
				</view>
				<view class="bottom-list-item" @click="isShow_H5_Mask = false">
					<text class="cuIcon-close bg-Snow"></text>
					<text class="mt20">微博</text>
				</view>
				<view class="bottom-list-item" @click="isShow_H5_Mask = false">
					<text class="cuIcon-close bg-Snow"></text>
					<text class="mt20">微博</text>
				</view>
			</view>
			<view class="mt20 bg-White padd30 wid1p text-center">取消</view>
		</view>
	</DropDownPopup>
</template>

<script>
import { DropDownPopup } from '../../pages/public/DropDownPopup.vue';
export default {
	props: {
		isShow_H5_Mask: {
			type: Boolean,
			default: false
		}
	},
	name: '',
	components:{DropDownPopup},
	created() {
		this.isShow_H5_Mask_S = this.isShow_H5_Mask;
	},

	data() {
		return {
			isShow_H5_Mask_S: false
		};
	}
};
</script>

<style lang="less" scoped>
.bottom-list {
	display: flex;
	background-color: #dbdbdb;
	box-sizing: border-box;
	.bottom-list-item {
		background-color: #fff;
		flex: 1;
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #000;
		text[class^='cuIcon-'] {
			border-radius: 50%;
			height: 100rpx;
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
			color: #000;
		}
	}
}
</style>
